<!--
 * @Description: 
 * @Author: wangfuwei
 * @Date: 2020-12-15 11:43:07
 * @LastEditors: wangfuwei
 * @LastEditTime: 2020-12-15 22:55:31
 * @FilePath: /horizon-frontend/src/views/index/GridCard.vue
-->
<template>
  <div>
    <grid-layout :layout="layout" :row-height="236" :margin="[10, 10]" :is-draggable="edit" :is-resizable="edit" @layout-updated="layoutUpdate" style="margin: -10px">
      <grid-item v-for="item in layout" :key="item.i" :i="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :minH="1" :minW="3" class="itemDiv">
        <!-- 删除 -->
        <div class="delete" v-if="edit" @click="remove(item.i)">
          <a-icon type="delete" style="color: #ffffff;margin-left: 3px; margin-bottom: 3px" />
        </div>
        <!-- 文本消息类型 -->
        <div style="height: 100%" v-if="itemConfig(item).type === 'message'">
          文本消息类型
        </div>
        <!-- 图文消息类型 -->
        <div style="height: 100%" v-if="itemConfig(item).type === 'news'">
          图文消息类型
        </div>
        <!-- 系统访问量 -->
        <div style="height: 100%" v-if="itemConfig(item).type === 'pv'">
          系统访问量
        </div>
        <!-- 饼图 -->
        <div style="height: 100%" v-if="itemConfig(item).type === 'pie'">
          饼图
        </div>
        <!-- 环形图 -->
        <div style="height: 100%" v-if="itemConfig(item).type === 'donut'">
          环形图
        </div>
        <!-- 数字卡片 -->
        <div style="height:100%" v-if="itemConfig(item).type === 'number'">
          数字卡片
        </div>
        <!-- 柱状图 -->
        <div style="height:100%" v-if="itemConfig(item).type === 'column'">
          柱状图
        </div>
        <!-- 折线图 -->
        <div style="height:100%" v-if="itemConfig(item).type === 'line'">
          折线图
        </div>
        <!-- 自定义 -->
        <div style="height:100%" v-if="itemConfig(item).type === 'custom'">
          自定义
        </div>
      </grid-item>
    </grid-layout>
  </div>
</template>
<script>
export default {
  props: {
    layout: Array,
    edit: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    layoutUpdate(newLayout) {
      this.$emit("updateLayout", newLayout);
    },
    // 获取当前卡片的config
    itemConfig(item) {
      if (item.config && JSON.parse(item.config)) {
        return JSON.parse(item.config);
      }
      return {};
    },
    // 删除
    remove(id) {
      const arr = JSON.parse(JSON.stringify(this.layout));
      const newArr = arr.filter(item => item.i !== id);
      this.$emit("updateLayout", newArr);
    },
  },
};
</script>
<style lang="less" scoped>
.itemDiv {
  background-color: #ffffff;
}
.delete {
  border-radius: 0 0 0 60px;
  width: 20px;
  height: 20px;
  background: #aeaeae;
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
